* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 设置整体页面高度 */
html, body {
    height: 100%;
    /* background-image: linear-gradient(to top, #37daec 0%, #305be8 100%); */
    /* background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%); */
    background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
    /* background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%); */
    background-position: center center;
    background-size: cover;
    background-repeat: repeat-y;
}

/* 上方导航栏 */
.nav {
    width: 100%;
    height: 50px;
    background-color: rgba(51, 51, 51, 0);
    color: black;

    display: flex;
    justify-content: left;
    align-items: center;
}

/* 导航栏中的图标 */
.nav img {
    width: 40px;
    height: 40px;
    margin-left: 30px;
    margin-right: 10px;
    border-radius: 50%;
}

/* 导航栏中的占位器 */
.nav .spacer {
    width: auto;
}

/* 导航栏中的按钮 */
.nav a {
    color: black;
    text-decoration: none;
    padding: 0 10px;
}

/* ==================================== */


/* 这个文件来放置主界面中的样式 */

.chat-container {
    padding-top: 20px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main {
    width: 840px;
    height: 640px;
    background-color: rgb(238, 238, 238);
    border-radius: 5px;

    display: flex;
}

.main .left {
    width: 240px;
    height: 100%;
    background-color: rgb(46, 50, 56);

    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.main .right {
    width: 600px;
    height: 100%;

    padding: 0 20px;
}

.main .left .user {
    height: 80px;
    font-size: 20px;
    line-height: 80px;
    color: white;
    padding: 0 20px;
}
/* ============================ */

.main .left .user {
    height: 100px;
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    padding: 20px;
    background-color: rgb(46, 50, 56);
}


.main .left .user img.avatar-img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 15px;
}

.main .left .user h3.username {
    font-size: 24px;
    color: white;
    margin: 0;
}

/* ============================ */

.main .left .list {
    height: 540px;

    /* 如果里面的内容太多了, 就自动提供一个滚动条 */
    overflow: auto;
}


.main .left .list li {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    padding: 10px 20px;
    color: white;
    border-top: 1px solid black;
}

.main .left .list li img.avtar-session-user {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 15px;
}

.main .left .list li h3.username {
    font-size: 18px;
    margin: 0;
    color: white;
    flex: 1;
    overflow: hidden; /* 避免用户名过长溢出 */
    white-space: nowrap; /* 不换行显示 */
    text-overflow: ellipsis; /* 超出部分用省略号表示 */
}

.main .left .list li p {
    margin: 0;
    font-size: 14px;
    color: white;
}



.main .left .list .selected {
    background-color: rgb(46, 54, 65);
}


/* 应用了这个 css 类的元素就会被自动隐藏 */
.hide {
    display: none;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: none;
}

.main .right .title {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

/* ========================== */
/* 消息框整体样式 */
.message-show {
    height: 450px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    overflow: auto; /* 内容过多时自动滚动 */
}
/* 消息容器样式 */
.message {
    display: flex;
    margin: 15px;
}

/* 左侧消息容器样式 */
.message-left {
    flex-direction: column;
    align-items: flex-start;
}

/* 右侧消息容器样式 */
.message-right {
    flex-direction: column;
    align-items: flex-end;
}

/* 头像和时间容器样式 */
.box-header {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

/* 头像样式 */
.avtar-session-user {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 5px;
    margin-bottom: 0px;
}

/* 时间样式 */
.box-header span {
    color: green;
}

/* 消息内容样式 */
.box p {
    padding: 10px;
    border-radius: 10px;
    max-width: 300px; /* 设置最大宽度 */
    overflow-wrap: break-word; /* 或者使用 word-wrap: break-word; 或 overflow-wrap: anywhere; */
}

/* 左侧消息背景样式 */
.message-left .box {
    background-color: white;
    color: black;
    border-radius: 10px;
}

/* 右侧消息背景样式 */
.message-right .box {
    background-color: rgb(123,181,107);
    color: black;
    border-radius: 10px;
}


/* ======================== */


.main .right .message-input {
    /* 先把 textarea 转成块级元素, 方便设置尺寸啥的 */
    display: block;
    width: 100%;
    height: 100px;
    border: none;
    outline: none;

    margin-top: 2px;
    background-color: rgb(238, 238, 238);
    padding: 10px;
    resize: none;
}

.main .right .ctrl {
    height: 35px;
    display: flex;
    justify-content: flex-end;
}

.main .right .ctrl button {
    height: 35px;
    width: 100px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.main .right .ctrl button:active {
    background-color: grey;
    color: white;
}